<template>
    <div :class="`animation-wrapper ${method}`">
        <slot></slot>
    </div>
</template>

<script setup lang="ts">
const prop = defineProps<{
    hover?: boolean
    active?: boolean
}>()

const method = computed((): string => {
    let type = ''
    if (prop.hover) {
        type = type + ' ' + 'hover'
    }
    if (prop.active) {
        type = type + ' ' + 'active'
    }
    return type
})
</script>

<style lang="scss" scoped>
.animation-wrapper {
    height: 50px;
    padding: 0 10px;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    > * {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    &.hover {
        &:hover {
            background-color: var(--el-color-primary-light-9);
            color: var(--el-color-primary);

            > * {
                animation: twinkle 0.3s ease-in-out;
            }
        }
    }
    &.active {
        &:active {
            > * {
                animation: rotateZ 0.3s ease;
            }
        }
    }
}
@keyframes twinkle {
    0% {
        transform: scale(0);
    }
    80% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes rotateZ {
    0% {
        transform: rotateZ(0);
    }
    80% {
        transform: rotateZ(-180deg);
    }
    100% {
        transform: rotateZ(0);
    }
}
</style>
